<template>
	<div v-loading="loading">
		<div id="components-form-demo-advanced-search">
			<div class="h2">附件</div>
		</div>
		<div class="table">
			<div class="imagecon">
				<div class="imagelist" v-for="(item,i) in data" :key="i">
					<div class="iconcon">
						<img v-if="item.FilePath.indexOf('jpg')>0||item.FilePath.indexOf('png')>0" :src="requestUrl+item.FilePath" />
						<div v-else class="fileicon">{{ item.FilePath.split('.')[1] }}</div>
					</div>
					<div class="title">{{ item.FileName }}</div>
					<div class="oprate">
						<oprateBtn title="下载" icon="icon-xiazai-wenjianxiazai-04" color="#1890FF" @tap="downloadFile(item)" ></oprateBtn>
						<oprateBtn title="删除" icon="icon-delete" color="red" @tap="deletemember(item)" ></oprateBtn>
					</div>
				</div>
				<div class="el-table__empty-text" style="margin:0 auto;" v-show="data.length==0">暂无数据</div>
			</div>
		</div>
		<!-- <div>
			<el-table ref="singleTable" :data="data" border highlight-current-row style="width: 100%">
				<el-table-column label="附件" min-width="100">
					<template slot-scope="scope">
						<div class="iconcon" @click="downloadFile(scope.row)">
							<div v-if="scope.row.FilePath.indexOf('jpg')>0||scope.row.FilePath.indexOf('png')>0">
								<img :src="requestUrl+scope.row.FilePath" />
								<div>{{scope.row.FileName}}</div> 
							</div>
							<div v-else>
								<div class="fileicon">{{ scope.row.FilePath.split('.')[1] }}</div>
								<div>{{scope.row.FileName}}</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="IsEnable" label="操作" width="130" fixed="right">
					<template slot-scope="scope">
						
						<a-tooltip placement="top">
							<template slot="title">删除</template>
							<i title="删除" class="iconfont icon-delete1" style="color: red;"
								@click="deletemember(scope.row)"></i>
						</a-tooltip>
					</template>
				</el-table-column>
			</el-table>
		</div> -->
	</div>
</template>

<script>
	import Func from '@/utils/func';
	import Cache from '@/utils/cache'
	import {
		GetActivityFileList,
		DeleteActivityFile
	} from '@/api/follow';
	const data = [];
	export default {
		components: {},
		data() {
			return {
				data,
				loading: false,
				tableHeight: parseFloat(window.innerHeight - 160),
				requestUrl: this.global.requestUrl,
				token: Cache.get('token'),
			};
		},
		computed: {},
		created() {
			this.getList();
		},
		mounted() {},
		methods: {
			deletemember(text) {
				let that = this
				this.$confirm({
					title: '提示',
					content: `您确定删除此条记录吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {}
						data.id = text.ID
						let res = await DeleteActivityFile(data);
						if (res.data.code == 0) {
							that.getList()
							that.$message.success(res.data.msg)
						} else {
							that.$message.error(res.data.msg)
						}
					}
				})
			},
			// downloadFile(file) {
			// 	let self = this;
			// 	let url = this.requestUrl + file.FilePath
			// 	const fileName = file.FileName;
			// 	let x = new XMLHttpRequest();
			// 	x.open("GET", url, true);
			// 	x.responseType = "blob";
			// 	x.onload = function() {
			// 		//self.exportLoading = false;
			// 		let url = window.URL.createObjectURL(x.response);
			// 		let a = document.createElement("a");
			// 		a.href = url;
			// 		a.download = fileName;
			// 		a.click();
			// 	};
			// 	x.send();
			// },
			async downloadFile(item) {
				let hrefUrl = this.requestUrl + '/Manage/ActivityFile/DownFile?userToken=' + encodeURIComponent(this
					.token) + '&id=' + item.ID;
				window.open(hrefUrl, '_blank');
			},
			async getList() {
				this.loading = true;
				let data = {};
				data.activityID = this.$route.query.ID
				let res = await GetActivityFileList(data);
				this.loading = false;
				this.data = res.data.data;
			},
		}
	};
</script>

<style lang="less" scoped>
	.imagecon {
		display: flex;
		flex-wrap: wrap;
	
		.imagelist {
			width: 140px;
			height: 180px;
			text-align: center;
			margin: 10px;
			position:relative;
	
			.iconcon {
				width: 140px;
				height: 140px;
				display: flex;
				justify-content: center;
				border-radius:10px;
				overflow: hidden;
				padding:5px;
			}
	
			.fileicon {
				width: 100px;
				height: 120px;
				color:#fff;
				font-weight: bold;
				font-size:20px;
				padding-top:34px;
				background: #ffc934;
				border-radius: 8px;
				background: linear-gradient(-135deg, transparent 15px, #48b0ff 0);
				position: relative;
	
				&::before {
					content: '';
					position: absolute;
					font-size:14px;
					right: 0;
					top: 12px;
					width: 22px;
					height: 22px;
					background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat;
					transform: translateY(-0.85em) rotate(0deg);
					transform-origin: bottom right;
					box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
					border-bottom-left-radius: inherit;
					/* 左下角继承border-radius */
				}
			}
	
			img {
				// width: 130px;
				// height: 130px;
				// min-width: 130px;
				// min-height: 130px;
				border-radius:10px;
				
			}
	
			.title {
				height:40px;
				line-height: 20px;
				display: -webkit-box;
				overflow: hidden;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: 12px;
				    color: #03081a;
			}
			.oprate{
				position:absolute;
				bottom:50px;
				left:0px;
				z-index:9;
				width:100%;
				height:30px;
				line-height:30px;
				background: rgba(255,255,255,0.3);
			}
		}
	}
</style>
